<template>
  <div class="line">
    <div class="top">
      <div class="title">
        <div>未来7天游客趋势</div>
        <img src="@/views/screen/images/dataScreen-title.png" alt="">
      </div>
    </div>
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const chart = ref()
onMounted(() => {
  const myChart = echarts.init(chart.value)
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      name: '(天)',
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      axisLabel: {
        color: "#fff"
      },
      nameTextStyle: {
        color: '#fff'
      }
    },
    yAxis: {
      name: '游客量',
      type: 'value',
      axisLabel: {
        color: "#fff"
      },
      nameTextStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '人流量',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        legendHoverLink: true,
        data: [1400, 700, 1501, 580, 1290, 690,200],
        type: 'line',
        label: {
          show: true
        },
        labelLine: {
          show: true
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(128, 255, 165)'
            },
            {
              offset: 1,
              color: 'rgb(1, 191, 236)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
      }
    ]
  };
  myChart.setOption(option)
})
</script>

<style lang="scss" scoped>
.line {
  height: 300px;
  margin: 0 20px;
  background: url(@/views//screen/images/dataScreen-main-rt.png)no-repeat;
  background-size: 100% 100%;

  .top {
    .title {
      color: white;
      height: 50px;
      font-size: 22px;
      padding-left: 10px;
    }
  }

  .chart {
    width: 100%;
    height: 250px;
  }
}
</style>
